<template>
  <div class="friend-container">
    <van-icon class="back" name="arrow-left" @click="$router.back()"></van-icon>
    <van-tabs slot="title" v-model="active">
      <van-tab title="关注">
        <follow-item></follow-item>
      </van-tab>
      <van-tab title="粉丝">
        <fan-item></fan-item>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import FanItem from './fan-item.vue'
import FollowItem from './follow-item.vue'
export default {
  name: 'Friends',
  components: {
      FanItem,
      FollowItem
  },
  props: {},
  data() {
    return {
      active: ''
    }
  },
  created() {
    this.active = this.$route.params.type === 'follow' ? 0 : 1
  }
}
</script>

<style scope lang="less">
.friend-container {
  .back {
    position: fixed;
    top: 0;
    left: 0;
    color: #fff;
    z-index: 10;
    line-height: 88px;
    margin-left: 20px;
    font-size: 40px;
  }
  .van-tabs {
    height: 88px;
    .van-tab--active span {
      font-size: 38px !important;
    }
    .van-tabs__wrap {
      display: flex;
      justify-content: center;
      background-color: #3296fa;
      span {
        font-size: 32px;
        color: #fff;
      }
      .van-tabs__nav {
        width: 300px;
        background-color: rgba(0, 0, 0, 0);
        padding: 0;
        .van-tab {
          width: 150px;
        }
        .van-tabs__line {
          bottom: 8px;
          width: 40px;
          background-color: #fff;
        }
      }
    }
    .van-tabs__content {
    }
  }
}
</style>
